
.settings {

  --settings-max-width: 600px;

  --settings-font-size: var(--form-large-font-size);
  --settings-menu-font-size: 16px;

  --settings-normal-text-color: var(--tabs-header-normal-text-color);
  --settings-selected-text-color: var(--tabs-header-selected-text-color);

  --settings-normal-bg-color: transparent;
  --settings-selected-bg-color: var(--tabs-header-selected-bg-color);

}

.settings, .settings ul, .settings ul li {
  margin: 0;
  padding: 0;
}

.split-pane.settings .sp-sidebar {
  flex-basis: 16rem;
}

.settings ul {
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  gap: 0.5rem;

  list-style: none;

  li {

    label {
    
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0.5rem;
      background-color: var(--settings-normal-bg-color);
      color: var(--settings-normal-text-color);
          
      .icon {
        width: 15pt;
        height: 15pt;
        color: var(--settings-normal-text-color) !important;
      }
      
      .title {
        font-size: var(--settings-menu-font-size);
        font-weight: var(--font-weight-medium);
      }
    
    }

    > [name="tabs"] {
      position: absolute;
      top: -9999px;
      left: -9999px;

      &:checked {
        & + label {
          background-color: var(--settings-selected-bg-color);
          color: var(--settings-selected-text-color);
          .icon {
            color: var(--settings-selected-text-color) !important;
          }
        }
      }
    }
  }

  li.separator {
    position: relative;
    text-align: center;
    margin: 0.5rem 0;
    z-index: 100;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;

    &:before,
    &:after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-color);
    }

    &:before {
      margin-right: 0.5rem;
    }

    &:after {
      margin-left: 0.5rem;
    }
  }


}

.settings .tab-content {

  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0px !important;
  padding: 0px;

  &:has(main .master-detail) {
    header {
      border-bottom: 1px solid var(--border-color);
    }
  }

  &:has(.sliding-root) {
    position: relative;
    height: 100%;
  }
  
  .description {
    margin: 1rem 0rem;
  }

  main {
    
    max-width: var(--settings-max-width);
    padding: 1rem 4rem;

    &.sliding-pane {
     &.editor {
        .form {
          max-width: var(--settings-max-width);
        }
      }
    }

    &:has(.master-detail) {
      max-width: none;
      .md-detail {
        max-width: var(--settings-max-width);
      }
    }

    &:has(table) {
      max-width: calc(var(--settings-max-width) * 1.5);
    }

    .sticky-table-container {
      th, td {
        font-size: var(--settings-font-size);
      }
    }

  }

}

.settings .form {
  
  overflow: hidden;
  font-size: var(--settings-font-size);

  &.form-vertical {
    .form-field {
      textarea {
        resize: none;
      }
    }
  }

}

.settings .actions {
  margin-top: 8px;
  display: flex;
}

.settings .actions button:first-child {
  margin-left: 0px;
}

.settings .actions .right {
  flex: 1;
  text-align: right;
}
